<template>
    <div id="Disbiao" ref="disbiao">

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const disbiao = ref(null)
var data = [683, 234, 234, 523, 345, 320, 280, 271, 254, 229, 210, 190, 182]
var titlename = ['有机物污染', '机物污染', '重金属污染', '固体废物污染', '汽车尾气污染', '工业废水污染', '生活垃圾', '农药化肥污染', '微生物污染', '噪音污染', '辐射污染', '氧化物污染', '硫氧化物污染'];
const option = {
    grid: {
        left: '10',
        top: '15',
        right: '10',
        bottom: '0%',
        containLabel: true
    },
    xAxis: {
        show: false
    },
    yAxis: [{
        show: true,
        data: titlename,
        inverse: true,
        axisLine: { show: false },
        splitLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
            textStyle: {
                color: '#fff'
            },
        }
    }, {
        show: false,
        inverse: true,
        data: data,
        axisLabel: { textStyle: { color: '#fff' } },
        axisLine: { show: false },
        splitLine: { show: false },
        axisTick: { show: false },
    }],
    series: [{
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: data,
        barWidth: 15,
        itemStyle: {
            normal: {

                color: '#1089E7',
            }
        },
        label: {
            normal: {
                show: true,
                position: 'right',
                formatter: '{c}',
                textStyle: { color: 'rgba(255,255,255,.5)' }
            }
        },
    }]
};
onMounted(() => {
    var myChart = echarts.init(disbiao.value);

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})
</script>

<style scoped lang="scss">
#Disbiao {
    width: 100%;
    height: 90%;
    margin-top: 10px;
}
</style>
